<template>
  <div id="view-index-content-page">
    <div class="content">
      <scroll-field class="scrollField" ref="scrollField">
        <template #scope="{ item, index }">
          <div class="articleItem" :class="{active: activeIndex === index}" @mouseenter="mouseenter(index)" @click="toPage(item)">
            <div class="left">
              <div class="title f28 fw600">{{ item.title }}</div>
              <div class="desc f12 ellipsis lineNum2 font3" v-show="activeIndex === index">{{ item.description }}</div>
            </div>
            <div class="right"></div>
            <div class="background" :style="{ 'background-image': `url(${baseImgDownLoadUrl + item.cover})` }"></div>
          </div>
        </template>
      </scroll-field>
    </div>
  </div>
</template>

<script>
import { getArticleListApi } from '@/api/article'
import ScrollField from '@/components/ScrollField'
export default {
  name: 'index-content',
  components: {
    [ScrollField.name]: ScrollField
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  mounted() {
  },
  methods: {
    mouseenter(index) {
      this.activeIndex = index
    },
    toPage(item) {
      this.$router.push(`/article?art_id=${item.artId}`)
    },
    reloadData() {
      this.$refs.scrollField.resetUpScroll()
    }
  }
}
</script>

<style lang="scss" scoped>
#view-index-content-page {
  height: 100%;

  .content {
    height: 100%;
  }

  .scrollField {
    height: 100%;

    .articleItem {
      height: 100px;
      background-color: $themeColor3;
      margin: 20px;
      box-sizing: border-box;
      padding: 4px 10px;
      border-radius: 8px;
      box-shadow: $boxShadow2;
      transition: .25s;
      cursor: pointer;
      display: flex;
      align-items: center;
      position: relative;

      .background {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: 50% auto;
        background-repeat: no-repeat;
        background-position: center right;
        mask-image: linear-gradient(90deg, transparent 50%, #000);
        mask-repeat: no-repeat;
        mask-position: right;
        mask-size: 100% 100%;
        border-radius: 8px;
      }

      &:hover {
        transition: .25s;
        box-shadow: $boxShadow1;
      }

      .left {
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-evenly;
      }

      .right {
        // width: 30%;
        // height: 100%;
      }
    }

    .active {
      height: 150px;
    }
  }
}
</style>